前面幾天介紹了幾個比較常用的 vue directive & vue option 接下來，將會練習套用 vuex 到系統中。

Why vuex ?

從前幾個範例中，可以發現，資料都是存放在各自 page 的 data 裡面，再傳給 component 進而完成一個頁面呈現。

1. 問題來了，一個大型系統中，重複使用到的資料一定很多，這樣各個頁面切換之間如何拿到同一筆資料呢？

ex: token, user info, shopping cart list etc..

因此我們需要一個集中所有資料的地方：store

2. 可能有朋友也有開發過 angular 框架的系統，雙向資料流，簡單靈活，可是發開到後期，團隊人數一多，專案一趕，就會產生難以離解的 code 且因為雙向綁定的關係，造成迴圈跑了多次，結果不容易預期，debug 不容易的狀況...。是不是有一種流程，或者一種設計模式可以幫我們解決這樣的事情呢？

單向資料流

3. 我們在開發不同頁面，相同功能，會呼叫同一個 function，vue 的元件化已經可以幫我們做到統一同樣的外觀，甚至相同 function, 不過可能背後執行的邏輯，以及向 server 溝通的 API 都不一樣...。是不是有一個框架可以幫我整理所有的行為，我們在元件裡面觸發不同行為呢？

action

如果你有以上的問題可以使用看看：vuex（基於單向資料流 Flux 設計模式 在 Vue 框架中的實作）

Vue + flux = vuex

圖片來源：https://www.youtube.com/watch?v=RY7vcYvb69kPen-Pineapple-Apple-Pen - PPAP Song (original) PIKO-TARO
演員：PIKO-TARO

Who use vuex ?

• 大型專案都會建議使用
• React Flux 框架有：Flux, Redex

What is vuex ?

• 單向資料流
• Flux design pettern
• 統一管理應用程式所有狀態
• 官方推薦項目之一

How to use vuex ?

vuex 2 官方文件

install vuex

一樣透過 npm 或 YARN 安裝

npm install vuex --save

use vuex

打開 main.js 宣告使用 vuex

// 引入 vuex
import Vuex from 'vuex'

// 告訴 Vue 使用 vuex
Vue.use(Vuex)

Flux 觀念

我們使用 vuex 官方流程圖來解釋：所有的動作都是從 action 出發，接著到了 store 把結果存起來改變 state 然後因為 state 改變了，所以 view（元件或頁面）就會跟著改變。

只有一個重點，就是這一連串的行為是不可逆的，因此稱為：單向資料流。

vuex 職權說明：

在 vuex 的設計中，view（元件或頁面）的變化不是他的職權範圍，這塊單純的讓 vue（專業的）去控制，因此在上面這張圖裡面，有一個塊綠色虛線所包含的內容才是 vuex 的工作項目，與 Vue 的工作完全沒有重疊，各司其職的搭配。

所有個動作都是從 action 開始的！因此我們從 action 開始看這張圖：

action

定義了整個應用程式的行為如：按下 login 這顆按鈕，它是一個 action！現在我們要開始登入囉！這樣的行為通常需要與 server 溝通，因此 call API 的行為（非同步）也會在 action 中執行！

它使用 commit 向 Mutations 溝通（傳遞資料）

Mutations

負責接收 action(commit) 資料並計算邏輯後改變 State

只有 mutation 可以改變 state！

到這邊，也許大家會覺得.. 為什麼流程要如此麻煩？

action --> commit --> mutation

我直接執行 mutation 不行嗎？

不行！最大的差別在於：

• action: 可以處理非同步的事件，再利用 commit 與 mutation 溝通。
• mutation: 在處理事件是同步的。

為什麼會這樣設計呢？

想像一下我們過去的程式流程，常常卡在處理這些非同步的流程上面，如果我們到 mutation 這層處理非同步的事件，那問題就沒有被解決，依然要等待 server response 並且計算邏輯後，才可以改變狀態。

錯誤流程：

• action
  1. commit
• mutation
  1. call API
  2. 等待
  3. server response
  4. 計算邏輯改變 state

現在我們將這些事件，往前一層到 action 去處理的話，就可以保證到了 mutation 資料都是即時的，計算後的狀態也是現在進行式。

正確流程：

• action
  1. call API
  2. 等待
  3. server response
  4. commit
• mutation
  1. 計算邏輯改變 state

State

負責記錄應用程式所有的 State

想像一下，登入流程大概是這樣：

最後我覺得套用了 vuex 的系統，會是這種感覺：

github 完整範例：

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。